<template>
  <el-dialog
    :title="form.id ? '编辑' : '新增'"
    :visible.sync="visible"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item
        label="字段标题"
        :label-width="formLabelWidth"
        prop="colTitle"
      >
        <el-input
          v-model="form.colTitle"
          autocomplete="off"
          placeholder="请输入字段标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="字段名" :label-width="formLabelWidth" prop="colName">
        <el-input
          v-model="form.colName"
          autocomplete="off"
          placeholder="请输入字段名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="标签引用名"
        :label-width="formLabelWidth"
        prop="propName"
      >
        <el-input
          v-model="form.propName"
          autocomplete="off"
          placeholder="请输入标签引用名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="表单类型"
        :label-width="formLabelWidth"
        prop="formType"
      >
        <fortress-select
          v-model="form.formType"
          :dictList="ViewFormTypeList"
          placeholder="请选择表单类型"
          clearable
        ></fortress-select>
        <template v-if="form.formType == 9 || form.formType == 10">
          <span style="margin-left: 17px">限制数量：</span>
          <el-input-number
            style="margin-left: 5px"
            v-model="form.limitSize"
            label="请输入数量限制"
            :min="1"
            :max="30"
          ></el-input-number>
        </template>
      </el-form-item>
      <el-form-item
        label="是否必填"
        :label-width="formLabelWidth"
        prop="isFormRequire"
      >
        <el-switch
          v-model="form.isFormRequire"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <el-form-item
        label="校验类型"
        :label-width="formLabelWidth"
        prop="validateType"
      >
        <fortress-select
          v-model="form.validateType"
          :dictList="ValidateTypeList"
          placeholder="请选择校验类型"
          clearable
        ></fortress-select>
      </el-form-item>

      <el-form-item
        label="数据集"
        :label-width="formLabelWidth"
        prop="listdataConfig"
      >
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入数据集"
          v-model="form.listdataConfig"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="medium" type="danger"
        >取 消</el-button
      >
      <el-button type="primary" size="medium" @click="submitForm('form')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { cmscolconfigInfo, cmscolconfigSave, cmscolconfigEdit } from "@/api/cms/cmscolconfig.js";
import { enumList, } from "@/api/public.api.js";
import * as ftVal from "@/common/fortressValidator.js";
export default {
  data() {
    return {
      visible: false,
      form: {
        colTitle: "",
        colName: "",
        propName: "",
        colType: "",
        isFormRequire: "2",
        validateType: "",
        formType: "",
        listdataConfig: "",
        limitSize: "",
        id:""
      },
      formLabelWidth: "120px",
      rules: {
        colTitle: [
          { required: true, message: "请输入字段标题", trigger: "blur" },
        ],
        colName: [
          { required: true, message: "请输入字段名", trigger: "blur" },
          { validator: ftVal.validateAlphabets, trigger: "blur" },
        ],
        propName: [
          { validator: ftVal.validateAlphabets, trigger: "blur" },
        ],
        formType: [
          { required: true, message: "请输入表单类型", trigger: "blur" },
        ],
      },
      YesNoList: [],
      ValidateTypeList: [],
      ViewFormTypeList: [],
    };
  },
  created() {
  },
  watch: {
    "form.colName": {
      handler: function (val) {
        this.form.propName = val
      }
    }
  },
  methods: {
    queryEnumList() {
      this.YesNoList = [];
      enumList("YesNo", "").then((resp) => {
        if (resp.code == 0) {
          this.YesNoList = resp.data;
        }
      });
      this.ValidateTypeList = [];
      enumList("ValidateType", "").then((resp) => {
        if (resp.code == 0) {
          this.ValidateTypeList = resp.data;
        }
      });
      this.ViewFormTypeList = [];
      enumList("ViewFormType", "").then((resp) => {
        if (resp.code == 0) {
          this.ViewFormTypeList =[] ;
		  resp.data.forEach(item=>{
			  if(item.code != "12"){
				  this.ViewFormTypeList.push(item)
			  }
		  })
        }
      });
    },
    init(formData) {
      this.resetForm();
      this.queryEnumList();
      //修改
      if (formData) {
        this.$nextTick(() => {
          this.form = {
            ...this.form,
            ...formData,

          };

        });
      }
      this.visible = true;
    },
    //提交表单数据
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit("refreshData", this.form);
          this.visible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        colTitle: "",
        colName: "",
        propName: "",
        colType: "",
        isFormRequire: "",
        validateType: "",
        formType: "",
        listdataConfig: "",
        limitSize: "",
        id:""
      };
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 7px;
  overflow: hidden;
  overflow-y: auto;
  font-weight: normal;
}
</style>
